import VXETable from 'vxe-table'
import createBem from '@Components/assets/js/utils/bem'
import { tableNamespace } from '../../../config'
import './index.scss'

const Bem = createBem(`${tableNamespace}__filter-string`)

VXETable.renderer.add('String', {
  renderFilter(h, renderOpts, params) {
    const option = params.column.filters[0]
    function handleInput(val) {
      params.$panel.changeOption(null, !!val, option)
    }

    function radioChange(radioLabel) {
      if (radioLabel === 'empty') {
        params.$panel.changeOption(null, true, option)
      } else {
        handleInput(option.data.value)
      }
    }
    return [
      <div class={Bem()}>
        <div class={Bem('type')}>
          <el-radio-group
            v-model={option.data.filterType}
            onChange={radioChange}
          >
            <el-radio label="has">包含</el-radio>
            <el-radio label="without">不包含</el-radio>
            <el-radio label="eq">等于</el-radio>
            <el-radio label="unequal">不等于</el-radio>
            <el-radio label="empty">空值</el-radio>
          </el-radio-group>
        </div>
        <div class={Bem('input')}>
          <el-input
            v-model={option.data.value}
            size={this.$store.getters.size}
            placeholder="多语句查询请用“，”分割"
            oninput={handleInput}
          />
        </div>
      </div>
    ]
  },
  // 重置数据方法
  filterResetMethod({ options }) {
    options[0].data.value = ''
    options[0].data.filterType = 'has'
  },
  // 筛选数据方法
  filterMethod({ option, row, column }) {
    let cellValue = row[column.property]
    const { filterType, value } = option.data
    const valueArr = value.split(/[,， ]/)
    // console.log(valueArr, cellValue)
    if (filterType === 'empty') {
      return cellValue === null
    } else if (filterType === 'without') {
      if (!cellValue) return true
      return !valueArr.some(v => cellValue.indexOf(v) > -1)
    } else if (filterType === 'unequal') {
      return !valueArr.includes(cellValue)
    }
    if (filterType === 'eq') {
      return valueArr.includes(cellValue)
    } else if (filterType === 'has') {
      if (!cellValue) return false
      return valueArr.some(v => cellValue.indexOf(v) > -1)
    }
  }
})
